<template>
  <div class="data-title">
    <!-- 上报概览 -->
    <div class="insert-box">
      <!-- 上报概览 -->
      <div class="insert-box-left">
        <div
          style="
            font-size: 16px;
            font-weight: 600;
            height: 60px;
            line-height: 60px;
          "
        >
          上报概览
        </div>
        <div style="display: flex; justify-content: space-between">
          <div class="img-left">
            <div><img src="@/assets/images/xzjg-icon1@2x.png" alt="" /></div>
            <div
              style="
                font-size: 40px;
                color: #333333;
                margin-left: 70px;
                font-weight: 500;
                margin-bottom: 30px;
              "
            >
              1
            </div>
            <div
              style="
                width: 136px;
                height: 44px;
                font-size: 16px;
                text-align: center;
                margin-left: 20px;
              "
            >
              上报平台/单位数量（个）
            </div>
          </div>
          <div class="img-right">
            <div style="margin-right: 20px; width: 50%">
              <!-- 小盒子 -->
              <div class="img-right-small">
                <div>
                  <img src="@/assets/images/xzjg-icon3@2x.png" alt="" />
                </div>
                <div>
                  <div
                    style="
                      font-size: 16px;
                      margin-top: 20px;
                      margin-bottom: 12px;
                      width: 200px;
                    "
                  >
                    监管数据数量（个）
                  </div>
                  <div style="font-size: 24px; font-weight: 500">85</div>
                </div>
              </div>
              <div
                class="img-right-small"
                style="margin-top: 20px; margin-bottom: 12px"
              >
                <div>
                  <img src="@/assets/images/xzjg-icon5@2x.png" alt="" />
                </div>
                <div>
                  <div
                    style="
                      font-size: 16px;
                      margin-top: 20px;
                      margin-bottom: 12px;
                    "
                  >
                    协力响应数量（个）
                  </div>
                  <div style="font-size: 24px; font-weight: 500">36</div>
                </div>
              </div>
              <div class="img-right-small">
                <div>
                  <img src="@/assets/images/xzjg-icon7@2x.png" alt="" />
                </div>
                <div>
                  <div
                    style="
                      font-size: 16px;
                      margin-top: 20px;
                      margin-bottom: 12px;
                      width: 200px;
                    "
                  >
                    督办响应数量（个）
                  </div>
                  <div style="font-size: 24px; font-weight: 500">5</div>
                </div>
              </div>
            </div>
            <div style="width: 50%">
              <!-- 小盒子 -->
              <div class="img-right-small">
                <div>
                  <img src="@/assets/images/xzjg-icon4@2x.png" alt="" />
                </div>
                <div>
                  <div
                    style="
                      font-size: 16px;
                      margin-top: 20px;
                      margin-bottom: 12px;
                      width: 150px;
                    "
                  >
                    协查申请数量（个）
                  </div>
                  <div style="font-size: 24px; font-weight: 500">3</div>
                </div>
              </div>
              <div
                class="img-right-small"
                style="margin-top: 20px; margin-bottom: 12px"
              >
                <div>
                  <img src="@/assets/images/xzjg-icon6@2x.png" alt="" />
                </div>
                <div>
                  <div
                    style="
                      font-size: 16px;
                      margin-top: 20px;
                      margin-bottom: 12px;
                    "
                  >
                    风险预警数量（个）
                  </div>
                  <div style="font-size: 24px; font-weight: 500">8</div>
                </div>
              </div>
              <div class="img-right-small">
                <div>
                  <img src="@/assets/images/xzjg-icon8@2x.png" alt="" />
                </div>
                <div>
                  <div
                    style="
                      font-size: 16px;
                      margin-top: 20px;
                      margin-bottom: 12px;
                    "
                  >
                    案件数量（个）
                  </div>
                  <div style="font-size: 24px; font-weight: 500">1</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 接入情况 -->
      <div class="insert-box-right">
        <div
          style="
            font-size: 16px;
            font-weight: 600;
            height: 60px;
            line-height: 60px;
          "
        >
          接入情况
        </div>
        <div style="display: flex">
          <div class="event-left">
            <div
              class="listCss"
              v-for="(item, index) in listArr"
              :key="index"
              :class="{ activeCss: activeVar == index }"
              @click="activeFun(item, index)"
            >
              <div>{{ item.title }}</div>
              <div>
                <span
                  style="
                    font-size: 24px;
                    color: #4b6eef;
                    font-weight: 500;
                    margin-left: 60px;
                    margin-top: 50px;
                  "
                  >{{ item.num }}</span
                >
                {{ item.tip }}
              </div>
            </div>
          </div>
          <!-- 饼图 -->
          <div class="event-right">
            <report-pie></report-pie>
          </div>
        </div>
      </div>
    </div>
    <!-- 上报趋势 -->
    <div class="dev-box">
      <div class="dev-box-title">
        <div>上报趋势</div>
        <!-- 下拉框 -->
        <div>
          <div>
            <el-select
              v-model="value"
              placeholder="下级平台/单位"
              size="small"
              :popper-append-to-body="false"
              style="margin-right: 20px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="value"
              placeholder="数据类型"
              size="small"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <!-- 折线图 -->
      <div>
        <insert-line></insert-line>
      </div>
    </div>
    <!-- 上报及拉取任务情况 -->
    <div class="xin-box">
      <div class="xin-box-title">
        <div>上报及拉取任务情况</div>
        <div class="more">更多</div>
      </div>
      <!-- 大盒子 -->
      <div style="display: flex">
        <!-- 小盒子1 -->
        <div class="xin-box-small">
          <!-- top -->
          <div class="xin-box-top">
            <div style="font-size: 16px; font-weight: 500">
              国家保密局行政监管平台
            </div>
            <div class="radio-box">
              <div class="radio-box-item"></div>
              <span style="color: #4eb020; margin-left: 6px">状态正常</span>
            </div>
          </div>
          <!-- 中间 -->
          <div style="border-bottom: 1px solid rgba(218, 220, 227, 1)">
            <div class="xin-box-center">
              <div class="center-left">
                <div style="display: flex">
                  <div style="width: 100px; font-size: 14px">当天上报量:</div>
                  <div style="font-size: 14px; color: #4b6eef">89</div>
                </div>
                <div style="display: flex">
                  <div style="width: 100px; font-size: 14px">当天拉取量:</div>
                  <div style="font-size: 14px; color: #8c8c8c">89</div>
                </div>
                <div style="display: flex">
                  <div style="width: 100px; font-size: 14px">接入协议:</div>
                  <div style="font-size: 14px; color: #8c8c8c">http</div>
                </div>
              </div>
              <div class="center-right">
                <div style="display: flex">
                  <div style="width: 100px; font-size: 14px">累计接入量:</div>
                  <div style="font-size: 14px; color: #4b6eef">89</div>
                </div>
                <div style="display: flex">
                  <div style="width: 100px; font-size: 14px">累计拉取量:</div>
                  <div style="font-size: 14px; color: #4b6eef">89</div>
                </div>
              </div>
            </div>
            <div class="xin-box-bottom">
              <div style="display: flex">
                <div style="width: 100px; font-size: 14px">作业:</div>
                <div style="font-size: 14px; color: #8c8c8c;width: 31px">2</div>
                <div
                  style="
                    width: 42px;
                    font-size: 14px;
                    margin-left: 23px;
                    color: #8c8c8c;
                    white-space: nowrap;
                  "
                >
                  启用:
                </div>
                <div style="width: 42px;font-size: 14px; color: #8c8c8c">2</div>
                <div
                  style="
                    width: 62px;
                    font-size: 14px;
                    color: #8c8c8c;
                    white-space: nowrap;
                  "
                >
                  未启用:
                </div>
                <div style="width: 42px;font-size: 14px; color: #8c8c8c">0</div>
               <div style="margin-right: 10px;font-size: 14px; color: #8c8c8c">|</div>
                <div
                  style="
                    width: 98px;
                    font-size: 14px;
                    color: #8c8c8c;
                  "
                >
                  当天异常次数:
                </div>
                <div style="width: 30px;font-size: 14px; color: #8c8c8c">0</div>
              </div>
              <div style="display: flex">
                <div style="width: 100px; font-size: 14px">最后上报时间:</div>
                <div style="width: 375px;font-size: 14px; color: #8c8c8c">
                  2023-03-30 12:08:22
                </div>
              </div>
              <div style="display: flex">
                <div style="width: 100px; font-size: 14px">最后拉取时间:</div>
                <div style="font-size: 14px; color: #8c8c8c">
                  2023-03-30 12:08:22
                </div>
              </div>
            </div>
          </div>
          <!-- 下面 -->
          
            <div class="small-bottom">
              <!-- 小方块 -->
              <div style="display: flex ;margin-bottom:8px">
                <div
                  class="divCss"
                  v-for="(item, index) in divArr"
                  :key="index"
                  :class="{ hoverCss: activeDiv == index }"
                  @click="hoverFun(item, index)"
                >
                  {{ item }}
                </div>
              </div>
              <div style="display: flex">
                <div style="width: 100px; font-size: 14px">作业名称:</div>
                <div style="font-size: 14px; color: #4b6eef">10</div>
              </div>
              <div style="display: flex">
                <div style="width: 100px; font-size: 14px">作业类型:</div>
                <div style="font-size: 14px; color: #8c8c8c">上报</div>
                <!-- <div style="width: 100px; font-size: 14px;margin-left:120px">作业状态:</div>
                <div style="font-size: 14px; color: #3ABF81 ">开启</div> -->
              </div>
               <div style="display: flex">
                <div style="width: 100px; font-size: 14px">当天上报异常:</div>
                <div style="font-size: 14px; color: #8c8c8c">0</div>
                 <!-- <div style="width: 100px; font-size: 14px;margin-left:140px">上报频次:</div>
                <div style="font-size: 14px; color: #8c8c8c">实时</div> -->
              </div>
              <div style="display: flex">
                <div style="width: 100px; font-size: 14px">接入协议:</div>
                <div style="font-size: 14px; color: #8c8c8c">http</div>
              </div>
              <div style="display: flex">
                <div style="width: 100px; font-size: 14px">最后上报时间:</div>
                <div style="font-size: 14px; color: #8c8c8c">
                  2023-03-30 12:08:22
                </div>
              </div>
           
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DataTitle from "./DataTitle";
import SmallBox from "./SmallBox";
import ReportPie from "./ReportPie";
import InsertLine from "./InsertLine";
export default {
  components: {
    DataTitle,
    SmallBox,
    ReportPie,
    InsertLine,
  },
  data() {
    return {
      // 默认为0(如不需要默认可设为null)，点击时将索引赋值给active，从而实现点击选中效果
      activeVar: 0,
      //  循环列表
      listArr: [
        { title: "接入数据", num: 138, tip: "条" },
        { title: "接入异常", num: 6, tip: "次" },
      ],
      activeDiv: 0,
      //  循环列表
      divArr: ["1", "2"],
      options: [],
      value: "",
    };
  },
  methods: {
    handleCheckWork(index) {
      this.isActive = index;
    },
    activeFun(item, index) {
      // item 为被选中的元素体
      this.activeVar = index;
    },
    hoverFun(item, index) {
      // item 为被选中的元素体
      this.activeDiv = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.data-title {
  // padding: 20px;
  // 接入概览
  .insert-box {
    display: flex;
    justify-content: center;
    .insert-box-left {
      width: 50%;
      background-color: rgb(255, 255, 255);
      border-radius: 4px;
      padding: 20px;
      padding-top: 0;
      .img-left {
        width: 25%;
        img {
          width: 90px;
          height: 90px;
          margin: 60px 40px 40px 40px;
        }
      }
      .img-right {
        width: 75%;
        display: flex;
        .img-right-small {
          background: #f3f5fb;
          border-radius: 4px;
          display: flex;
          img {
            width: 50px;
            height: 50px;
            margin: 20px;
          }
        }
      }
    }
    .insert-box-right {
      width: 50%;
      background-color: rgb(255, 255, 255);
      margin-left: 20px;
      border-radius: 4px;
      padding: 20px;
      padding-top: 0;
      .event-left {
        width: 30%;

        .listCss {
          width: 240px;
          height: 90px;
          border-radius: 4px;
          padding: 35px 20px 33px;
          font-size: 16px;
          font-weight: 500;
          display: flex;
          background: #fafafa;
          border: 1px solid rgba(230, 230, 230, 1);
          margin-bottom: 20px;
        }
        .activeCss {
          background: #f3f5fb;
          border: 1px solid rgba(75, 110, 239, 1);
        }
      }
      .event-right {
        width: 70%;
      }
    }
  }
  // 接入趋势
  .dev-box {
    // height: 400px;
    background: #ffffff;
    border-radius: 4px;
    padding: 20px;
    padding-top: 0px;
    margin-top: 20px;
    .dev-box-title {
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
    }
    ::v-deep {
      .el-select-dropdown {
        position: absolute !important;
        top: 47px !important;
      }
    }
  }
  // 各下级单位
  .xin-box {
    // height: 454px;
    background: #ffffff;
    border-radius: 4px;
    margin-top: 20px;
    padding: 0 20px;
    padding-bottom: 20px !important;
    .xin-box-title {
      height: 60px;
      line-height: 60px;
      font-weight: 600;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      .more {
        color: #4b6eef;
        font-size: 14px;
        font-weight: 400;
        height: 40px;
        line-height: 40px;
      }
      .more:hover {
        border-bottom: 1px solid #4b6eef;
        cursor: pointer;
      }
    }
    .xin-box-small {
      width: 33%;
      background: #ffffff;
      border: 1px solid rgba(218, 220, 227, 1);
      border-radius: 4px;
      .xin-box-top {
        height: 70px;
        line-height: 70px;
        background: #ffffff;
        padding-left: 20px;
        padding-right: 20px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(218, 220, 227, 1);
        .radio-box {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 78px;
          height: 24px;
          font-size: 12px;
          text-align: center;
          line-height: 24px;
          background: #eafff5;
          border: 1px solid rgba(58, 191, 129, 1);
          border-radius: 2px;
          margin-top: 24px;
          .radio-box-item {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #3abf81;
          }
        }
        .radio-box-red {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          background: #fff1f0;
          border: 1px solid rgba(255, 163, 158, 1);
          border-radius: 2px;
          margin-top: 24px;
          .radio-red-item {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #fa541c;
          }
        }
        .radio-box-col {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          background: #f5f7fb;
          border: 1px solid rgba(218, 220, 227, 1);
          border-radius: 2px;
          margin-top: 24px;
          .radio-col-item {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #979797;
          }
        }
      }
      .xin-box-center {
        display: flex;
        line-height: 30px;
        padding-left: 20px;
        padding-top: 20px;
        .center-left {
          width: 50%;
        }
        .center-right {
          width: 50%;
        }
      }
      .xin-box-bottom {
        line-height: 30px;
        padding-left: 20px;
      }
    }
      .small-bottom {
        line-height: 30px;
        background: #f9fafd;
        padding: 20px;
      }
    .divCss {
      cursor: pointer;
      width: 30px;
      height: 30px;
      text-align: center;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      margin-right: 10px;
    }
    // 选中时的样式 (继承上方默认样式)
    .hoverCss {
      background: rgba(75, 110, 239, 0.05);
      border: 1px solid rgba(75, 110, 239, 1);
      border-radius: 4px;
      color: #4B6EEF;
    }
  }
}
</style>
